<template>
  <div>
    {{$t('common.base.dataSources')}}<br />
    <el-select
      clearable
      class="w-187 mb20 mt5"
      v-model="table" :placeholder="$t('common.placeholder.select')" 
      :disabled="approveSetting.registerFieldFlag"
      @change="updateForm">
      <el-option :label="$t('common.base.productRegistration')" value="register"> </el-option>
    </el-select>
    <br />
    {{$t('common.base.relationField')}}<br />
    <el-select
      clearable
      :disabled="approveSetting.registerFieldFlag"
      class="w-187 mt5"
      v-model="fieldName"
      :placeholder="$t('common.placeholder.select')"
      @change="updateField"
    >

      <el-option
        v-for="item in filterList"
        :key="item.fieldName"
        :label="item.displayName"
        :value="item.fieldName"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'field-map-setting',
  props: {
    approveSetting: {
      type: Object,
      // eslint-disable-next-line no-empty-function
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    },
    field: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      table: '',
      fieldName: ''
    };
  },
  watch: {
    approveSetting(n, d) {
      this.fieldName = n.sourceField;
      this.table = n.sourceTable;
      // this.duibi()
    },
  },
  computed: {
    filterList() {
      if (this.field.formType === 'select') {
        return this.list.filter(v => (v.setting || {}).isMulti === this.field.isMulti)
      } else {
        return this.list
      }
    }
  },
  created() {
    this.fieldName = this.approveSetting.sourceField;
    this.table = this.approveSetting.sourceTable;
  },
  methods: {
    // duibi(){
    //  console.log(this.list.filter(item=>{return item.fieldName == this.fieldName}))
    // },
    /**
     * 更新审批设置
     *
     * @param {string} key 更新的key值
     * @param {string} value 更新值
     * @param {number} level 更新审批的层级
     */
    updateField(value) {
      this.$emit('fieldChange', value);
    },
    updateForm(value) {
      this.$emit('tableChange', value);
    }
  }
};
</script>

<style lang="scss" scoped>
.setting-approve {
  &-people {
    line-height: 40px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #999999;
  }
}

.ml-12 {
  margin-left: 12px;
}

.mt-12 {
  margin-top: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.w-187 {
  width: 187px;
}
.setting-approve-people {
  ::v-deep .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
    .el-input__inner {
      width: 300px;
    }
  }
  line-height: 20px;
}
.approve-radio-group {
  margin: 16px 0;
}
.one-level-approve {
  margin-bottom: 8px;
}
.more-level-approve {
  margin: 16px 0 8px 0;
}
</style>
